<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-7">
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
    <script>
        Vue.component('button-counter', {
            data: function () {
                return {count: 0}
            },
            template: '<button @click="increment">{{ count }}</button>',
            methods: {
                increment: function () {
                    this.count++;
                    this.$emit('increment');
                }   
            }
        });
        new Vue({
            el: '#app-7',
            data: {
                total: 0
            },
            methods: {
                incrementTotal: function () {
                    this.total ++
                }
            }
        });
    </script>
</body>


</html>